<template>
  <div class="order">
    <van-sticky>
      <nav-bar title="订单列表" />
      <div class="tab">
        <van-tabs v-model:active="activeName" color="#ff9854">
          <template v-for="(tab, index) in tabName" :key="index">
            <van-tab :title="tab.name" :name="tab.type">
            </van-tab>
          </template>
        </van-tabs>
      </div>
    </van-sticky>
    <!-- 内容 -->
    <div class="content">
      <div v-if="orderList?.length">
        <template v-for="(item, index) in orderList">
          <order-item :item-data="item"></order-item>
        </template>
      </div>
      <div v-else class="tips">
        <img src="@/assets/img/order/icon-order.png" alt="">
        <div class="title">近期暂无订单</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import navBar from "@/components/navBar/index.vue"
import orderItem from "./components/orderItem.vue"
import { getOrderData } from '@/services'
import { ref, watch } from 'vue';
const activeName = ref('')
const tabName = [
  {
    name: '全部订单',
    type: 'all'
  },
  {
    name: '近期订单',
    type: 'recent'
  },
  {
    name: '待支付',
    type: 'pend'
  }
]
const orderList = ref(null)
watch(activeName, (newVal) => {
  getOrderData(newVal).then(res => {
    orderList.value = res.data.data.orders
    console.log(orderList.value);
  })
})
</script>

<style lang="less" scoped>
.order {
  height: 100vh;
  padding-bottom: 55px;

  --van-tabs-line-height: 40px;
  --van-tab-active-text-color: var(--primary-color);

  .content {
    background-color: white;
    height: calc(100% - 86px);
    overflow: scroll;

    .tips {
      text-align: center;
      margin-top: 80px;

      img {
        width: 88%;
      }

      .title {
        margin-top: 20px;
        color: #000;
        font-size: 18px;
      }
    }
  }
}
</style>